<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vant.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>

		<script src="html5plus://ready"></script>
		<title></title>
		<style type="text/css">
				body{
					background-color: #fafafa;
				}
			#one {
				background-color: red;
				height: 80px;
					
			}
			#two{
				margin-bottom: 20px;
			}
			.van-nav-bar__title{
				color: white;
				font-size: 15px;
				padding-top: 35px;
			}
			.van-nav-bar .van-icon{
				color: white;
				
				padding-top: 10px;
			}
			.van-nav-bar__text{
				color: white;
				padding-top: 10px;
				font-size: 15px;
			}
			
		.van-card__title{
			width: 180px;
		}
	
		.van-card__price {
		    position: absolute;
		    padding-left: 190px;
		    margin-top: -35px;
		    width: 99px;
		}
		.van-card__content {
		    position: absolute;
		    padding-left: 122px;
			}	
			.van-card__num {
			    float: right;
			    margin-top: -17px;
			    margin-right: -40px;
			}
			#button{
				padding-left: 60%;
			}
			#js{
				text-align: center;
				margin-bottom: 10px;
			}
	</style>
	</head>

	<body>
		<div id="app">
			<van-row >
				<van-nav-bar  title="我的订单" left-text="返回" left-arrow id="one" @click-left="back"></van-nav-bar>
					
			</van-row>
			
			<van-row id="two" v-for="(i,n) in shops">
				
				<van-panel title="订单编号" :desc="i.Code" :status="i.StatusName">
				  <div>
				  	<van-card
					  :num="i.GoodsList[0].BuyCount"
					  :price="i.GoodsList[0].GoodsMarketPrice"
					  :title="i.GoodsList[0].Name"
					  :thumb="i.GoodsList[0].GoodsImageUrl"
					>
					</van-card>
					<div id="js">
						共<span>{{i.GoodsList[0].BuyCount}}</span>件，合计<span>￥{{i.GoodsList[0].GoodsMarketPrice}}</span>(含运费￥{{i.GoodsList[0].PostagePrice}}元)
					</div>
					  <div slot="footer" id="button">
					    <van-button round  size="small" type="danger" @click="show=!show">支付</van-button>
					    <van-button round  size="small" type="default">取消订单</van-button>
					  </div>
				  </div>
				</van-panel>
				
			</van-row>
			<van-actionsheet
			  v-model="show"
			  :actions="actions"
			  cancel-text="取消"
			  @select="onSelect"
			  
			/>
			<!-- @cancel="onCancel" -->
			
		</div>
		<script type="text/javascript">
			
			var a=localStorage.getItem("keys");
				ajax({
				url:"http://dsapi.ysd3g.com/api/MyOrderList",
				dataType:"JSONP",
				data:{
					key:a
				},
				success:function(res){
					console.log(res)
				
					localStorage.setItem("info",res.Data.length)
					for(var i=0;i<res.Data.length;i++){
						
						app.shops.push(res.Data[i]);
					}
					
				}
				
				});
			var app = new Vue({
				el: "#app",
				data: {
					shops:[],
					show: false,
					  actions: [
						{
						  name: '支付宝'
						},
						{
						  name: '微信',
						  
						}
					  ]
						
				},
				methods:{
					back:function(){
						window.location.href="personalCenter.html";
					},
					onSelect:function(item) {
					  // 点击选项时默认不会关闭菜单，可以手动关闭
					  this.show = false;
					  Toast(item.name);
					}
				}
				
			});
		</script>
	</body>

</html>